<template>
  <a-modal
    v-model="visible" 
    title="选择BIM"
    @cancel="handleCancel"
    class="popup-box"
    :mask="false"
    @ok="handleOk"
    :maskClosable="false"
    :closable="false"
  >
    <div class="container">
      <div class="func-box">      
        <div class="title">
          <i class="decoration"></i>
          <h5>方法一</h5>
        </div>
        <div class="func-button">
            <span class="oneline">从地图点击选择模型建筑</span>
            <a-button type="primary" @click="chooseTile">地图选点</a-button>
        </div>
      </div>
      <div class="func-box">
        <div class="title">
          <i class="decoration"></i>
          <h5>方法二</h5>
        </div>
        <div class="func-select">
          <a-select mode="default" show-search label-in-value style="width: 100%" placeholder="请输入模型名称" @change="handleChange">
            <a-select-option v-for="item in modelList" :key="item.path">
              {{item.name}}
            </a-select-option>
          </a-select>
        </div>
      </div>
    </div>
    <template slot="footer">
      <div class="selected-name">
        <div v-if="buildingName == ''">未选择</div>
        <div v-if="buildingName != ''" style="color:#2688ED;">已选择：{{buildingName}}</div>
      </div>
      <a-button key="back" @click="handleCancel">
        取消
      </a-button>
      <a-button key="submit" type="primary" @click="handleOk">
        确定
      </a-button>
    </template>
  </a-modal>
</template>
<script>
import AgPopup from "@/views/components/precut/AgPopup.vue";

let tileset = null;
let pickerHelper = null;
export default {
  components: {
    "ag-popup": AgPopup,
  },
  data() {
    return {
      modelList:[],
      buildingName:'',
      buildingId:'',
      bimPath: ''
    };
  },
  props: ["visible","tableName"],
  mounted() {
    this.addBIMList(this.tableName);
  },
  methods: {
    chooseTile() {
      var _this = this;
      var viewer = CIM.viewer;
      //关闭弹窗
      this.$emit("selectCheck", false);
      pickerHelper = new agcim.interactive.PickerHelper(viewer);
      pickerHelper.on("LEFT_CLICK", function (movement) {
        let o = movement.position;
        var pick = viewer.scene.pick(o);
        if (pick && pick.tileset) {
          tileset = pick.tileset;
          pickerHelper.off();
          _this.buildingName = tileset.agMetaData.nameCn;
          _this.buildingId = tileset.asset.buildingId;
          _this.$emit("selectCheck",{
            selectVisible: false, 
            buildingId: _this.buildingId, 
            buildingName: _this.buildingName,
            tileset: tileset
          });
        }
      });
    },
    addBIMList(name){
      let params = {
          tableName: name,
      };
      agcim.widgets.widgetAssetsTable.get(params).then(res=>{
        this.modelList = res.content
      })

    },
    handleChange(value,item) {
      var data = this.modelList.filter(i =>{ 
        return i.name == value.label.trim();
      })
      this.buildingId = data[0].id
      this.buildingName = value.label;
      this.bimPath = value.key;
    },
    handleOk(){
      let _this = this;
      let tileset;
      var aglayerIds = CIM.layerTree._aglayerIds;
       var items = [];
        if (aglayerIds.indexOf(this.buildingId) < 0) {
          items.push(this.buildingId);
        }
        CIM.layerTree.addMany(items, CIM.viewer); 
        
        var tilesets = CIM.viewer.scene._primitives._primitives.filter(item =>{
          if(item.agMetaData)
           return item.agMetaData.id == this.buildingId
        })

        tileset = tilesets[0]; 
        tileset.readyPromise.then((tileset) => {
          let selectVisible = false;
          _this.$emit("selectCheck", {
            selectVisible: selectVisible, 
            buildingId: _this.buildingId, 
            buildingName: _this.buildingName, 
            tileset: tileset
          });
            CIM.layerTree.zoomToLayerById(this.buildingId)
        }).catch(function (error) {
        });
    },
    handleCancel() {
      let flag = false;
      this.$emit("selectCheck", flag);
    },
  },
};
</script>
<style scoped>
  .popup-box {
    width: 300px;
  }
  .title {
    display: block;
    margin: 0px 0px 2px;
    /* margin-bottom: 10px !important; */
    width: 100%;
  }
  .title h5 {
    display: inline-block;
    font-size: 15px;
    /* font-family: Microsoft YaHei, Microsoft YaHei-Bold; */
    font-weight: 700;
    margin: 0px 0px 0px 5px;
  }
  .decoration {
    display: inline-block;
    width: 3px;
    height: 14px;
    background: #1f81f2;
  }
  .container {
    padding: 5px 10px 10px;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .func-button{
    margin: 10px 0 10px 10px;
  }
  .oneline{
    display: block;
  }
  .selected-name{
    width: 335px;
    padding-right:10px;
    display: inline-block;
    text-align: left;
  }
</style>